<template>
    <!-- 盒须图 -->
    <div class="chart-item">
        <div class="chart-item-title">
            {{ title }}
            <div class="chart-item-bottom-group">
                <i class="el-icon-minus chart-item-bottom" title="缩小" @click="lessen()"></i>
                <i class="el-icon-full-screen chart-item-bottom" title="铺满" @click="full()"></i>
            </div>
        </div>
        <pageSignal ref="pageDom" v-if="name == 'pageSignal'" class="chart-item-content" layout="all"
            :showClass="showClass" :change="change" />
        <pageChannel ref="pageDom" v-if="name == 'pageChannel'" class="chart-item-content" layout="all"
            :showClass="showClass" :change="change" />
        <pageLink ref="pageDom" v-if="name == 'pageLink'" class="chart-item-content" layout="all" :showClass="showClass"
            :change="change" />
    </div>
</template>

<script>
import pageSignal from './pageSignal.vue'; // 信号域
import pageChannel from './pageChannel.vue'; // 信道域
import pageLink from './pageLink.vue'; // 链路域
export default {
    name: 'chartItem',
    emits: ['lessen', 'full'],
    components: { pageSignal, pageChannel, pageLink },
    props: {
        name: { type: String },
        // 布局类型
        layout: { type: String, default: 'one' },
        showClass: { type: Boolean },
        change: {}
    },
    watch: {
    },
    data() {
        return {
            // 下标名称
            title: ''
        }
    },
    created() {
        this.title = this.getTitle(this.name)
    },
    mounted() {
    },
    methods: {
        // 获取小窗口标题
        getTitle(name) {
            if (name == 'pageSignal') return '信号域';
            if (name == 'pageChannel') return '信道域';
            if (name == 'pageLink') return '链路域';
        },
        // 缩小窗口
        lessen() {
            this.$emit('lessen', this.name);
        },
        // 最大化窗口
        full() {
            this.$emit('full', this.name);
        },
        remove() {
            const pageDom = this.$refs.pageDom;
			for (let i = 0; i < pageDom.length; i++) {
				try {
					pageDom[i].remove()
				} catch (er) {
					console.log(`${i}没有remove方法`)
				}
			}
        }
    }
}
</script>

<style lang="scss" scoped></style>